<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box,.box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box2{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button class="btn1">取消延时函数</button>
    <hr>
    <div class="box2"></div>
    <button class="btn2">清除定时器</button>
    <button class="btn3">重新开始定时器</button>

    <script>
        var box = document.querySelector('.box');
        var btn1 = document.querySelector('.btn1');
        var box2 = document.querySelector('.box2');
        var btn2 = document.querySelector('.btn2');
        var btn3 = document.querySelector('.btn3');
        var box1Time = null;
        var box2Time = null;

        box.addEventListener('click', function () {
            console.log('box is clicked...');
            box1Time = setTimeout(function () {
                console.log('this is  settimeout fn....');
            }, 2000)
            console.log('end...');
        })
        // 取消延时函数
        btn1.addEventListener('click', function () {
            console.log('取消延迟...');
            clearTimeout(box1Time);
        })

        box2.addEventListener('click', function () {
            box2Time = setInterval(function () {
                console.log('box2 is clicked...');
            }, 1000)
        })

        btn2.addEventListener('click', function () {
            console.log('清除定时器');
            clearInterval(box2Time);
        })

        btn3.addEventListener('click', function () {
            box2.click();
        })

    </script>
</body>
</html>